<template>
  <div>
    <div class="top_bar">
      <van-nav-bar @click-left="$router.go(-1)">
        <template #left>
          <van-icon name="arrow-left" size="24" color="rgb(76 74 74)" />
          <span style="margin-left: -8px; margin-top: 1px">好物分享</span>
        </template>
        <template #right>
          <van-icon
            style="margin-right: -17px"
            size="24"
            color="rgb(76 74 74)"
            name="more-o"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="hbox"></div>
    <div class="item" v-for="item in videList" :key="item.vidID">
      <!-- //头像 -->
      <van-cell>
        <template #title>
          <div class="top_l">
            <img class="herad" :src="iconUrl + item.userHeard" alt="" />
            <span style="margin-left: 10px">{{ item.userName }}</span>
          </div>
        </template>
        <template #right-icon>
          <div class="top_r">
            <van-tag
              class="gz"
              v-if="isFollow == '已关注'"
              color="#7232dd"
              plain
              >已关注</van-tag
            >
            <van-tag
              class="gz"
              v-if="isFollow == '未关注'"
              color="#7232dd"
              @click="FollowClick(item.userID)"
              plain
              >+关注</van-tag
            >
            <van-tag class="gz" v-if="isFollow == '本人'" color="#7232dd" plain
              >我自己</van-tag
            >
          </div>
          <van-icon name="arrow-down" class="rows" size="19" />
        </template>
      </van-cell>
      <div style="padding: 6px">
        <div v-if="item.MediaType == '视频'" class="vide">
          <vueMiniPlayer
            ref="vueMiniPlayer"
            :video="video"
            :mutex="true"
            @fullscreen="handleFullscreen"
          />
        </div>
        <van-swipe
          v-if="item.MediaType == '图片'"
          class="my-swipe"
          indicator-color="rgb(255, 94, 22)"
        >
          <van-swipe-item v-for="img in imgarr" :key="img">
            <img v-lazy="videoUrl + img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="bottom">
        <van-cell class="bot_tiel" @click="OpenpuporShow">
          <template #title>
            <div class="top_l">
              查看TA已买到的宝贝
              <van-tag style="margin-left: 4px" type="primary">TA已买</van-tag>
            </div>
          </template>
          <template #right-icon>
            <div class="top_r bot_r" style="display: flex">
              <div v-for="item in godimg" :key="item">
                <img :src="item" alt="" />
              </div>
            </div>
            <van-icon
              style="margin-top: 7px; margin-right: -15px"
              name="arrow"
              size="19"
            />
          </template>
        </van-cell>
        <div>
          <p style="padding: 4px 16px">
            {{ item.message }}
          </p>
          <div
            style="
              padding: 4px 16px;
              display: flex;
              justify-content: space-between;
            "
          >
            <van-tag mark plain type="primary"># 日常穿搭分享</van-tag>
            <van-tag color="#7232dd" plain
              ><van-icon name="location" />{{ item.address }}</van-tag
            >
          </div>
        </div>
        <van-cell>
          <template #title>
            <van-icon name="share-o" size="24" />
          </template>
          <template #right-icon>
            <div
              style="display: flex; justify-content: space-between; width: 80px"
            >
              <p><van-icon name="like-o" size="24" />6</p>
              <p><van-icon name="chat-o" size="24" />7</p>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
    <van-popup
      style="z-index: 214748364744"
      v-model="popupShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <h3 style="text-align: center; padding: 15px">TA提到的商品</h3>
      <div class="god" v-for="item in goodsList" :key="item.GoodsID">
        <van-card
          tag="自营"
          :price="item.GoodsPrice"
          desc=""
          :title="item.GoodsName"
          :thumb="imgUrl + item.GoodsPic"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      video: {
        url: "",

        muted: true,
        loop: false,
        preload: "auto",
        poster: "",
        volume: 1,
        autoplay: true,
      },
      popupShow: false,
      vid: 0,
      videList: [],
      imgarr: [],
      godimg: [],
      gidArr: [],
      goodsList: [],
      isFollow: "",
    };
  },
  mounted() {},

  created() {},
  methods: {
    handleFullscreen() {},
    getview(to, from) {
      this.vid = this.$route.params.vid;
      this.getvideDetals();
    },
    async getvideDetals() {
      const { data: res } = await this.$http.get("getVideoDetails", {
        params: { vid: this.vid },
      });
      console.log(res);
      try {
        res.data.forEach((item) => {
          this.imgarr = item.Media.split(" ");
          this.imgarr.pop();

          this.godimg = item.GoodsPic.split(" ");
          this.godimg.pop();
          this.gidArr = item.GoodsID.split(" ");
          this.gidArr.pop();

          this.video.url = this.videoUrl + this.imgarr[0];
        });
      } catch (error) {
        // console.log(error)
      }
      console.log(res);
      this.videList = res.data;
      this.getReferring();
      this.isFollew();
    },
    async getReferring() {
      for (var i = 0; i < this.gidArr.length; i++) {
        const { data: res } = await this.$http.get("ReferringGoods", {
          params: { gid: this.gidArr[i] },
        });

        this.goodsList.push(res.data[0]);
      }
    },
    async isFollew() {
      try {
        const { data: res } = await this.$http.get("isFollow", {
          params: {
            id: this.emailLogin[0].userID,
            fid: this.videList[0].userID,
          },
        });
        this.isFollow = res.is;
        if (res.id == this.emailLogin[0].userID) {
          this.isFollow = "本人";
        }
      } catch (error) {
        // console.log(error)
      }
    },
    async FollowClick(uid) {
      //关注视频号博主
      let data = {
        userID: this.emailLogin[0].userID,
        folowed_user: uid,
        status: "已关注",
        time: new Date(),
      };
      let fans = {
        userID: uid,
        follower: this.emailLogin[0].userID,
        status: "已关注",
        time: new Date(),
      };
      const { data: res } = await this.$http.post("FollowTheVideo", data);
      const { data: res1 } = await this.$http.post("fans", fans);

      this.isFollow = "已关注";
      console.log(res1);
    },
    OpenpuporShow() {
      this.goodsList = [];
      this.popupShow = true;
      this.getReferring();
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
    $video() {
      return this.$refs.vueMiniPlayer.$video;
    },
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.getview(newVal, oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.top_bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  top: 0;
  background: #fff;
  z-index: 1500;
  border-bottom: 1px solid #eee;
  .van-icon {
    left: -12px;
  }
}
.vide {
  border-radius: 14px;
  color: #fff;
  font-size: 20px;
  height: 420px;
  text-align: center;
  background-color: #181818;
  video {
    width: 100%;
    height: 100%;
  }
}
.my-swipe .van-swipe-item {
  border-radius: 14px;
  color: #fff;
  font-size: 20px;

  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.herad {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.top_l {
  display: flex;
  align-items: center;
}
top_r {
  display: flex;
  align-items: center;
}
.gz {
  width: 40px;
  height: 25px;
  /* text-align: center; */
  padding-left: 9px;
  /* padding-right: 10px; */
  border-radius: 12px;
  margin-right: 7px;
}
.rows {
  margin-top: 4px;
}
.bot_tiel {
  border-bottom: 1px solid #e5e5e5;
  margin-top: -11px;
  height: 3rem;
}
.bottom {
  padding: 6px;
}
.bot_r {
  img {
    margin: 2px;
    width: 30px;
    height: 30px;
    border: 1px solid #f84715;
  }
}
.god {
  .van-card__price {
    color: #fd4713;
  }
}
</style>